<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-row :gutter="35">
				<el-upload v-model:file-list="fileList" action="http://localhost:8080/merchant/common/upload"
					list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :headers="customHeaders" :on-success = "saveHouseImg" accept="image/*">
					<el-icon>
						<Plus />
					</el-icon>
				</el-upload>
				<el-dialog v-model="dialogVisible">
					<img w-full :src="dialogImageUrl" alt="Preview Image" />
				</el-dialog>
			</el-row>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import { houseApi } from '/@/api/house/index';
import { uploadFileApi } from '/@/api/uploadFile/index';
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { RefSymbol } from '@vue/reactivity';
import { c, s } from 'vite/dist/node/types.d-aGj9QkWt';
import { number } from 'echarts';

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

let tes = JSON.parse(localStorage.getItem('user') || '{}');
const customHeaders = reactive({
	token: tes.data,
});

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	state.ruleForm.photograph = uploadFile.url || '';
	houseApi().deleteHouseImg(state.ruleForm).then((res) => {
		console.log(res)
		if (res.code === 1) {
			ElMessage.success('删除成功');
		}
	})
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
	dialogImageUrl.value = uploadFile.photograph!
	state.ruleForm.photograph = dialogImageUrl.value;
	dialogVisible.value = true
}



// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '' as string | number,
		programId: '' as string | number,
		photograph: '' , // 房间名称
		
	},
	typeData: [] as any[], // 分类数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const saveHouseImg = (res: any) => {
	state.ruleForm.photograph = res.data;
	console.log(state.ruleForm.photograph)
	houseApi().saveHouseImg(state.ruleForm).then((res) => {
		emit('refresh');
	});
}

// 打开弹窗
const openDialog = (id: number | string) => {
	state.ruleForm.programId = id;
	houseApi().getHouseImg({ id }).then((res) => {
		fileList.value = res.data.map((item: { id: any; photograph: any; }) => ({
			id: item.id,
			url: item.photograph
		}));
	});

	state.dialog.isShowDialog = true;
};


// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>